<template>
  <div class="main-box width1200">
    <div>
      <el-form :inline="true">
        <el-form-item prop="projectName" label="项目名称">
          <el-input v-model="queryParams.projectName" placeholder="项目名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item prop="projectNo" label="项目编号">
          <el-input v-model="queryParams.projectNo" placeholder="项目编号" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="projectList" border style="width: 100%;" v-loading="loading">
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <!-- <el-table-column prop="projectNo" label="项目编号"></el-table-column> -->
        <el-table-column prop="qxmc" label="区县"></el-table-column>
        <el-table-column prop="companyName" label="公司"></el-table-column>
        <el-table-column prop="applicantName" label="上传人" width="90"></el-table-column>
        <el-table-column prop="telephone" label="联系电话"></el-table-column>
        <el-table-column prop="tkStatu" label="踏勘状态"  width="90">
          <template slot-scope="scope">
            <el-tag :type="getTagType(scope.row.tkStatu)">{{ scope.row.tkStatu == 0 ? '待踏勘' : scope.row.tkStatu == 1 ? '通过' : '不通过'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tkStatu" label="项目状态"  width="100">
          <template slot-scope="scope">
            <span>{{ getStatus(scope.row.status)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tkAuditInfo" label="踏勘备注">
          <template slot-scope="scope">
            <span>{{ getTkAuditInfo(scope.row.tkAuditInfo)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="提交时间"></el-table-column>
        <!-- <el-table-column prop="fayt" label="方案用途"></el-table-column>
        <el-table-column prop="dzbah" label="电子备案号	"></el-table-column> -->
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button 
              v-if="scope.row.tkStatu == 1 && scope.row.haveFile == 1"
              @click="handleClick(scope.row)" 
              type="text" 
              style="color: #0c7cff;"
              size="small">
              上传资料</el-button>
            <el-button type="text" size="small" 
              v-if="scope.row.haveTk == 1"
              :disabled="scope.row.tkStatu != 0"
              @click="handleTkClick(scope.row)">
              踏勘审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryParams.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.size"
        background
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      title="踏勘结果"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
       
        <el-radio-group v-model="tkForm.statu">
          <el-radio :label="-1">不通过</el-radio>
          <el-radio :label="1">通过</el-radio>
        </el-radio-group>
        <el-input type="textarea" placeholder="请填写踏勘审核结果" v-model="tkForm.remark" style="margin-top: 10px;">
        </el-input>
      </div>
     

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTkInfo">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import service from "@/apiService/apiService";

export default{
  data() {
    return {
      loading:false,
      tkForm:{
        id:'',
        remark:'',
        statu:1,//-1 不通过 1 通过
      },
      dialogVisible:false,
      total:0,
      queryParams:{
        pageSize:10,
        currentPage:0,
        projectName:'',
        projectNo:'',
        telephone:''
      },
      userInfo: {
        userVO: {},
        projectVOs: [],
      },
      projectList:[],
      currentItem:{},
      status: {
        1: "待交资料",
        2: "资料审核中",
        3: "待补交资料",
        4: "待交缴费凭证",
        5: "处理中",
        6: "已完成",
      },
    }
  },
  methods:{
    getTagType(val){
      if (val == 0) {
        return 'warning'
      }else if (val == -1) {
        return 'danger'
      }else{
        return 'success'
      }
    },
    getStatus(val) {
      return this.status[val];
    },
    getTkAuditInfo(val){
      if (val) {
        let info = JSON.parse(val)
        let audit = info[0].audit
        return audit
      }else{
        return ''
      }
      
    },  
    submitTkInfo(){
      if (this.tkForm.statu == -1 && this.tkForm.remark == '') {
        this.$message({
            message: "请填写踏勘不通过的原因",
            type: "warning",
          });
        return
      }
      service.submitTk(this.tkForm).then(res=>{
        this.$message({
          message: "提交成功",
          type: "success",
        });
        this.dialogVisible = false
        if (this.tkForm.statu == 1) {
          this.pushJw()
        }
        this.handleQuery()
      }).catch(err=>{
        this.$message({
          message: err,
          type: "error",
        });
      })
    },
    //踏勘审核成功后推送数据到吉威数据库
    pushJw(){
      service
        .saveProjectData({
          annexTypes: ["fj_sfzmcl"],
          jhlx: "apply",
          projectNo: this.currentItem.projectNo,
        })
        .then((res) => {
          this.$message({
            message: "推送成功",
            type: "success",
          });
          this.getProjectList();
        })
        .catch((err) => {});
    },
    handleSizeChange(){
      this.handleQuery()
    },
    handleCurrentChange(){
      this.handleQuery()
    },
    handleClick(val){
      this.$router.push({path:'form',query:{
        id:val.id
      }})
    },
    handleTkClick(val){
      this.currentItem = val
      this.tkForm.id = val.id
      this.dialogVisible = true;
    },
    resetQuery(){
      this.queryParams.projectName = ''
      this.queryParams.projectNo = ''
    },
    handleQuery(){
      this.loading = true
      this.queryParams.telephone = this.userInfo.userVO.telephone
      service
        .getProjectListData(this.queryParams)
        .then((res) => {
          this.projectList = res.data.records;
          this.total = res.data.total
        })
        .catch((err) => {
          console.log(err);
        }).finally(()=>{
          this.loading = false
        });
    }
  },
  mounted() {
    // document.querySelector(".header-site-sel").style.display = "block";
    // document.querySelector(".header-login-box").style.display = "inline-block";
    // document.querySelector(".logout-th").style.display = "inline-block";
    // document.querySelector(".login-th").style.display = "none";
    // document.querySelector(".register-th").style.display = "none";

    // // 页尾
    // document.querySelector(".footer-bah").style.display = "block";
    // document.querySelector(".footer-zbdw").style.display = "block";
    // document.querySelector(".footer-fixed").style.display = "block";
    // document.querySelector(".footer-adr").style.display = "block";
    // document.querySelector(".footer-zfzc").style.display = "inline";
    // document.querySelector(".footer-dzjg").style.display = "inline";
    // document.querySelector(".footer-aqcx").style.display = "inline";
    let user = window.localStorage.getItem("userInfo");
    if (user) {
      this.userInfo = JSON.parse(user);
      this.handleQuery();
    } else {
      this.$router.replace("/");
    }
  },
}

</script>
<style lang="less" scoped>
  .main-box{
    background-color: #fff;
    padding: 40px;
    padding-right: 80px;
  }
  /deep/ .el-button--primary{
    background-color: #0c7cff !important;
  }
  /deep/ .el-pagination{
    margin: 10px 0px;
    float: right;
  }
</style>